<template>
	<span class="tree-expand">
		<span></span>
		<span class="tree-label" v-show="isEdit">
			<el-input class="edit" size="mini" autofocus v-model="DATA.name" :ref="'treeInput'+DATA.id" @click.stop.native="nodeEditFocus" @blur.stop="nodeEditPass(STORE,DATA,NODE)" @keyup.enter.stop.native="nodeEditPass(STORE,DATA,NODE)"></el-input>
		</span>
		<span v-show="!isEdit">
			<span>{{DATA.name}}</span>
		</span>
		<span class="tree-btn" v-show="!isEdit">
			<i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i>
			<i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i>
			<i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i>
		</span>
	</span>
</template>

<script>
export default {
  name: "treeExpand",
  props: ["NODE", "DATA", "STORE", "maxexpandId"],
  data() {
    return {
      isEdit: false
    };
  },
  mounted() {},
  methods: {
    nodeAdd(s, d, n) {
      //新增
      this.$emit("nodeAdd", s, d, n);
    },
    nodeEdit(s, d, n) {
      //编辑
      this.isEdit = true;
    },
    nodeDel(s, d, n) {
      //删除
      this.$emit("nodeDel", s, d, n);
    },
    nodeEditPass(s, d, n) {
      //编辑完成
      this.isEdit = false;
      this.$emit("nodeEdit", s, d, n);
    },
    nodeEditFocus() {
      //阻止点击节点的事件冒泡
    }
  }
};
</script>

<style>
.tree-expand {
  overflow: hidden;
}
.tree-expand .tree-label {
  font-size: 0.9em;
}
.tree-expand .tree-label .edit {
  width: 80%;
}
.tree-expand .tree-btn {
  display: none;
  float: right;
  margin-right: 20px;
}
.tree-expand .tree-btn i {
  color: #8492a6;
  font-size: 0.9em;
  margin-right: 3px;
}
</style>